<template>
  <div class="card">
    <h3 class="title">卡密管理</h3>
    <div class="toolbar">
      <el-button type="danger" size="small" icon="el-icon-plus" @click="showDialog = true">添加</el-button>
      <el-form :model="searchForm" inline size="small">
        <el-form-item prop="no">
          <el-input placeholder="请输入卡密" v-model="searchForm.no" />
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="onSearch">搜索</el-button>
      </el-form>
    </div>
    <!-- 表数据 -->
    <xu-table :data="tableData" :options="tableColumn" :pager="pager">
      <template slot="status" slot-scope="{ row }">
        <el-tag v-if="row.status === '1'" size="mini">已使用</el-tag>
        <el-tag v-else-if="row.status === '0'" type="info" size="mini">未使用</el-tag>
      </template>
      <template slot="user" slot-scope="{ row }">
        <el-tooltip v-if="row.user">
          <div slot="content">
            <p>账号：{{ row.user.username }}</p>
            <p>昵称：{{ row.user.nickname }}</p>
            <p>手机号：{{ row.user.phone_number }}</p>
          </div>
          <span>{{ row.user.nickname }}</span>
        </el-tooltip>
        <span v-else>-</span>
      </template>
    </xu-table>

    <!-- 生成弹窗 -->
    <el-dialog title="批量生成卡密" :visible.sync="showDialog">
      <el-form :model="form" :rules="rules" ref="formRef">
        <el-form-item label="生成数量" prop="num">
          <el-input type="number" v-model="form.num" min="1" max="99" />
        </el-form-item>
        <el-form-item label="面额" prop="money">
          <el-input type="text" v-model="form.money" min="1" max="99999999" placeholder="卡面额" />
        </el-form-item>
      </el-form>

      <div class="footer" slot="footer">
        <el-button type="default" @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="submit">生成</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import table from '../../../mixins/table'
import { CardActionsEnum } from '../../../_/vue/store/card'
export default {
  mixins: [table],
  data () {
    return {
      showDialog: false,
      form: {
        num: 1,
        money: 100
      },
      rules: {
        num: [{ required: true, message: '请输入数量', trigger: 'blur' }]
      },
      tableColumn: [
        { attrs: { label: '卡号', prop: 'no' } },
        { attrs: { label: '密码', prop: 'password', width: '120px' } },
        { attrs: { label: '面额', prop: 'money', width: '120px', align: 'center' } },
        { attrs: { label: '用户', prop: 'user', width: '200px', align: 'center' } },
        { attrs: { label: '状态', prop: 'status', width: '80px', align: 'center' } },
        { attrs: { label: '使用时间', prop: 'use_time', width: '140px', align: 'center' } },
        {
          attrs: { label: '操作', prop: 'opt', width: '120px', align: 'center' },
          buttons: [
            {
              label: '删除',
              icon: 'el-icon-delete',
              type: 'popover',
              click: ({ row, $index }) => {
                if (row.status === '0') {
                  this.delete({ ids: [row.id] })
                  this.$message.success('删除成功')
                  this.tableData.splice($index, 1)
                } else {
                  this.$message.error('该卡已使用，不允许删除')
                }
              }
            }
          ]
        }
      ]
    }
  },
  methods: {
    ...mapActions({
      list: CardActionsEnum.LIST,
      delete: CardActionsEnum.DELETE,
      store: CardActionsEnum.STORE
    }),
    submit () {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          await this.store(this.form)
          this.$message.success('生成卡密成功')
          this.getData()
          this.showDialog = false
          this.$refs.formRef.resetFields()
        }
        return false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
